<!DOCTYPE HTML>
<html lang="{{theme.lang}}">
    <head>
        <meta charset="UTF-8">
        {%- if post.filename == 'index' %}        
        <title>{{config.package.title|title}} - {{config.package.description}}</title>
        {%- else %}
        <title>{{config.package.title|title}} - {{post.title}}</title>
        {%- endif %}
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="{{system.name}} {{system.version}}" />
        {%- block assets %}
        <link type="image/x-icon" href="{{static_url('css/favicon.ico')}}" rel="icon">
        <link rel="stylesheet" href="{{static_url('css/normalize.css')}}" />
        <link rel="stylesheet" href="{{static_url('css/site.css')}}" />
        <link rel="stylesheet" href="{{static_url('css/solarized.css')}}" />    
        <link rel="stylesheet" href="{{static_url('style.css')}}" />
        {%- include "snippet/head.html" %}
        <script src="{{static_url('js/site.js')}}"></script>
        <!--[if lt IE 9]>
        <script src="{{static_url('js/html5shiv.js')}}"></script>
        <![endif]-->
        {%- endblock %}
        {%- block afterstyle %}{% endblock %}
        <script>
        seajs.use(['arale/fixed/1.0.1/fixed', '/static/side'], function(Fixed, side) {
            Fixed('.side-area', 20);
            side.init();
        });
        </script>
    </head>
    <body>
        <div id="body-wrapper">
            <div class="head-area">
                <div class="title-area">            
                    <h1>
                        <a href="{{content_url('index.html')}}">{{config.package.title|title}}</a>
                    </h1>
                    <p class="description">{{config.package.description}}</p>
                    <img src="/static/alice-top.png" alt="alice" />
                </div>
                <iframe src="http://ghbtns.com/github-btn.html?user=aliceui&repo=aliceui.org&type=watch&count=true"
                allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
            </div>
            <div class="nav-area">
                <ol class="main-nav">
                    <li><a href="/"><i title="首页" class="iconfont"></i> 首页</a></li>
                    {%- for item in resource.pages|find_category('alice') %}
                    <li><a href="{{permalink_url(item)}}">{{item.title}}</a></li>
                    {%- endfor %}
                </ol>
            </div>
            <div class="main-area">
                {%- if post.toc %}
                <div class="side-area">{{post.toc}}</div>
                {% else %}
                <div class="side-area">
                    <ul>
                        <li class="side-loading"><img width="160" alt="加载中..." src="/static/loading.gif"></li>
                    </ul>
                </div>                
                {%- endif %}
                <script type="text/template" id="list-template">
                    <li><a href="#"><i class="iconfont" title="单箭头右">&#x00E5;</i></a></li>
                </script>
                <div class="content-area">
                    <h1>{{post.title}}</h1>
                    <div class="content">{{ post.html|replace_code|add_anchor }}</div>
                </div>
                {%- if post.filename == 'index' %}
                <div class="comment-area">
                    <!-- Duoshuo Comment BEGIN -->
                    <div class="ds-thread"></div>
                    <script type="text/javascript">
                    var duoshuoQuery = {short_name:"aliceui"};
                    (function() {
                        var ds = document.createElement('script');
                        ds.type = 'text/javascript';ds.async = true;
                        ds.src = 'http://static.duoshuo.com/embed.js';
                        ds.charset = 'UTF-8';
                        (document.getElementsByTagName('head')[0] 
                        || document.getElementsByTagName('body')[0]).appendChild(ds);
                        })();
                    </script>
                    <!-- Duoshuo Comment END -->
                </div>
                {%- endif %}
            </div>
        </div>
        <div id="footer-wrapper">
            <footer>
            <p class="powered">
            {%- include "snippet/foot.html" %}
            </p>
            </footer>
        </div>
    </body>
</html>

